﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearchBox.ascx.cs" Inherits="CustomControlPractice.Controls.SearchBox.SearchBox" %>
<div>
    <script type="text/javascript">
        var prompt = "Search...";
        var errorMessage = "Pleaes enter the search keyword.";

        $(document).ready(function () {
            var container = $(".Searchbox");
            var searchBox = $(".Searchbox input[type='text']");

            container.mouseover(function () {
                container.removeClass().addClass("Searchbox SearchboxOver");
            })
            searchBox.focus(function () {
                container.removeClass().addClass("Searchbox SearchboxSelected SearchboxBg");
            })
            container.mouseleave(function () {
                container.removeClass().addClass("Searchbox SearchboxAwaken");
            })

            searchBox.mousedown(function () {
                if (searchBox.val() == prompt) searchBox.val("");
            })
            searchBox.keydown(function () {
                if (event.keyCode == 13) {
                    if (searchBox.val() == '') {
                        alert(errorMessage);
                        return false;
                    }
                    eval("<%=SearchClickReference %>");
                }
            })
            searchBox.blur(function () {
                if (searchBox.val() == "") searchBox.val(prompt);
            })
        })

    </script>
    <div class="Searchbox SearchboxAwaken">
        <input name="input" class="Input" type="text" value="Search..." runat="server"/>
        <asp:Button ID="searchButton" CssClass="SearchButton" runat="server" OnClick="OnSearchButtonClick" Text=" " />
    </div>
    
</div>